<template>
  <div class="cour">
    <!-- 课程详情 -->
    <header>
      <van-nav-bar title="课程详情" left-arrow @click-left="$router.go(-1)">
        <template #right>
          <van-icon name="cluster-o" />
        </template>
      </van-nav-bar>
      <div class="nav">
        <p>{{ courList.title }}</p>
        <h2>{{ courList.price }}</h2>
        <p class="p">
          <span
            >共{{ courList.total_periods }}课时 |
            {{ courList.browse_num }}人已报名</span
          >
        </p>
      </div>
    </header>
    <!-- 教学团队 -->
    <div class="box">
      <h2>教学团队</h2>
      <ul>
        <li v-for="item in courLists" :key="item.teacher_id">
          <img :src="item.avatar" alt="" />
          <p>{{ item.teacher_name }}</p>
        </li>
      </ul>
    </div>
    <!-- 课程介绍 -->
    <div class="box1">
      <h2>课程介绍</h2>
      <p>{{courList.course_statement}}</p>
    </div>
    <!-- 课程大纲 -->
    <div class="box2">
      <h2>课程大纲</h2>
      <p>{{courList.course_statement}}</p>
    </div>
    <footer>
      <van-button type="warning" size="large">确定</van-button>
    </footer>
  </div>
</template>

<script>
import { NavBar, Icon,Button } from "vant";
import { courceId } from "../request/http";
export default {
  name: "courceDetail",
  data() {
    return {
      courList: [], //疯狂英语
      courLists: [], //教学团队
      //courLists1:[],//课程介绍
    };
  },
  mounted() {
    courceId(this.$route.query.id).then((res) => {
      console.log(res);
      this.courList = res.info;
      this.courLists = res.teachers;
    });
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]:Button
  },
};
</script>

<style lang="scss" scoped>
  cour{
    height: 100vh;
  }
header {
  background-color: #fff;
  .nav {
    box-sizing: border-box;
    padding: 0 0.42667rem 0.5rem;
    p {
      font-size: 24px;
    }
    h2 {
      color: #ffa643;
    }
    .p {
      color: #ccc;
      font-size: 18px;
    }
  }
}
.box {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0.42667rem 0.5rem;
  margin: 20px 0;
  background-color: #fff;
  ul {
    display: flex;
    li {
      text-align: center;
      margin-right: 10px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      
    }
  }
}
.box1,.box2{
  width: 100%;
  box-sizing: border-box;
  padding: .625rem 0.42667rem 0.5rem;
  background-color: #fff;
}
.box1{
  margin: 20px 0;
}
.box2{
  margin-bottom: 100px;
}
footer{
  width: 100%;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>